import zrender from 'zrender/zrender'
import Circle from 'zrender/graphic/shape/Circle'

export default {
  mounted() {
    const zr = zrender.init(this.$refs.chart)
    const circle = new Circle({
      shape : {
        cx : 200,
        cy : 200,
        r : 80
      },
      draggable: true,
      onclick(e) {
        this.setStyle({ fill: 'red' })
        return true
      }
    })

    zr.add(circle)

    zr.on('click', (e) => {
      circle.setStyle({ fill: 'black' })
      // e.cancelBubble = true
    })
  },

  render(h) {
    return (
      <div class="page">
        <div ref="chart" style="width: 100%; height: 600px"></div>
      </div>
    )
  }
}
